<template>
  <el-card class="countdown-card">
          <template #header>
            <div class="card-header">
              <span>最近考试倒计时</span>
            </div>
          </template>
          <div class="countdown-content">
            <el-statistic title="剩余时间" :value="countdownTime" :format="countdownFormat" />
            <el-progress :percentage="countdownPercentage" :stroke-width="12" :color="customColors" />
            <el-button type="primary" class="start-exam-btn">立即考试</el-button>
          </div>
        </el-card>
</template>

<script setup lang="ts">
import { computed, ref,onMounted,onBeforeUnmount } from 'vue'
// 倒计时相关
const countdown = ref(7200) // 剩余秒数（2小时）
const countdownTime = computed(() => Math.floor(countdown.value))
const countdownPercentage = computed(() => Math.floor((countdown.value / 7200) * 100))
const countdownFormat = () => {
  const hours = Math.floor(countdown.value / 3600)
  const minutes = Math.floor((countdown.value % 3600) / 60)
  const seconds = countdown.value % 60
  return `${hours}时${minutes}分${seconds}秒`
}

// 自定义进度条颜色
const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
]

// 定时器
let timer: any
onMounted(() => {

  timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--
    }
  }, 1000)
})

onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>

</style>